home *** CD-ROM | disk | FTP | other *** search
/ Programming a Multiplayer FPS in DirectX / Programming a Multiplayer FPS in DirectX (Companion CD).iso / DirectX / dxsdk_oct2004.exe / dxsdk.exe / Documentation / DirectX9 / directx9_c.chm / directx / code / members.js < prev    next >
Encoding:
Text File  |  2004-09-30  |  15.7 KB  |  437 lines
  1.  
  2. var gsTabControl="";
  3. var gaDivs = new Array();
  4. var gaTabs = new Array();
  5. var goPersist = null;        // creation of this object is defered until after the entire objectmembers system
  6.                             // has been rendered.  That is because I need a reference to content div.
  7. var gsPageId = "";
  8.  
  9. function CPersist(attachedTo, storePath){
  10.     if( oBD.doesPersistence ){
  11.         this._obj = attachedTo;
  12.         this._obj.addBehavior("#default#userData");
  13.         this._path = storePath;
  14.         this._loaded = false;
  15.     }
  16. }
  17.  
  18. CPersist.prototype.Save = function(){
  19.     if( oBD.doesPersistence ){
  20.         if(this.IsLoaded()){
  21.             var enabled = true;
  22.             var code = "try{ this.GetAttached().save(this._path); } catch(e) {enabled = false;}";
  23.             eval(code);
  24.         }
  25.     }
  26. }
  27.  
  28. CPersist.prototype.Load = function(){
  29.     if( oBD.doesPersistence ){
  30.         if(!this.IsLoaded()){
  31.             var enabled = true;
  32.             var code = "try{ this.GetAttached().load(this._path); } catch(e) {enabled = false;}";
  33.             eval(code);
  34.             
  35.             if(!enabled) return;
  36.             
  37.             this._loaded = true;
  38.         }
  39.     }
  40. }
  41.  
  42. CPersist.prototype.GetAttached = function(){
  43.     if( oBD.doesPersistence ) return this._obj;
  44. }
  45.  
  46. CPersist.prototype.IsLoaded = function(){
  47.     if( oBD.doesPersistence ) return this._loaded;
  48. }
  49.  
  50. CPersist.prototype.SetAttribute = function(key, value){
  51.     if( oBD.doesPersistence ){
  52.         if( !this.IsLoaded() ) this.Load();
  53.  
  54.         if( this.IsLoaded() ){            // confirm that the load actually happened.  Cannot add data if load failed.
  55.             if( !gsPageId ) pageID = "unknown"; else pageID = gsPageId;    
  56.             this.GetAttached().setAttribute(pageID + "." + key, value);
  57.         }
  58.         
  59.         this.Save();
  60.     }
  61. }
  62.  
  63. CPersist.prototype.GetAttribute = function(key){
  64.     if( oBD.doesPersistence ){
  65.         if( !this.IsLoaded() ) this.Load();
  66.  
  67.         if( this.IsLoaded() ){            // confirm that the load actually happened.  Cannot get data if load failed.
  68.             if( !gsPageId ) pageID = "unknown"; else pageID = gsPageId;    
  69.             var value = this.GetAttached().getAttribute(pageID + "." + key);
  70.         }
  71.     
  72.         if(key == "selectedTab"){
  73.             if(!value) value = 0;
  74.         } else if(key == "expanded"){
  75.             if(value == "true")
  76.                 value = true;
  77.             else
  78.                 value = false;
  79.         } else if(key == "scroll"){
  80.             if(!value) value = 0;
  81.         }
  82.     
  83.         return value;
  84.     }
  85. }
  86.  
  87. //
  88. // initilizes a new, logical tab for objectmembers.  A "tab" consists of both
  89. // the tab and the member content.
  90. //
  91. function CTabber(newTab){
  92.     this._caption = ""; this._content = null; this._tab = null;
  93.  
  94.     // only initialize of this is actually a tab.  Tabs are identifed by a @tabName attribute.
  95.     if(newTab.tabName){
  96.         this._initializeComponent(newTab);
  97.     } else {
  98.         return null;
  99.     }
  100. }
  101.  
  102. //
  103. // Returns the caption used for the tab.
  104. //
  105. CTabber.prototype.GetCaption = function(){
  106.     return this._caption;
  107. }
  108.  
  109. //
  110. // Sets the caption used for the tab.  Also updates the tabbed title bar.
  111. //
  112. CTabber.prototype.SetCaption = function(newCaption){
  113.     this._caption = newCaption;
  114.     
  115.     if(this.IsActive){        // should only change title bar if currently active.
  116.         oMTitle.innerText = newCaption;
  117.     }
  118. }
  119.  
  120. // 
  121. // Returns the <div> that is attached to this tab object.
  122. //
  123. CTabber.prototype.GetContent = function(){
  124.     return this._content;
  125. }
  126.  
  127. //
  128. // Returns the rendered tab (<TD>) for this tab object.
  129. //
  130. CTabber.prototype.GetTab = function(){
  131.     return this._tab;
  132. }
  133.  
  134. //
  135. // Returns true if this tab object is currently being rendered (e.g. the <div> is displayed),
  136. // otherwise returns false.
  137. //
  138. CTabber.prototype.IsActive = function(){
  139.     return (this.GetTab().className == "oMTabOn" ? true : false);
  140. }
  141.  
  142. //
  143. // Not used, ignore.
  144. //
  145. CTabber.prototype._setColumnHeaders = function(){
  146.     var heads = this.GetContent().getElementsByTagName("TH");
  147.     for(var i=0; i<heads.length; i++){
  148.         var cn = heads[i].cloneNode(true);
  149.         oMHeadings.appendChild(cn);
  150.         heads[i].style.display = "none";
  151.     }
  152. }
  153.  
  154. // 
  155. // Forces a an inactive tab to become active.  That means that the 
  156. // tab itself changes state and the <div> is rendered.
  157. //
  158. // Any previously active tab is made inactive first.
  159. //
  160. CTabber.prototype.MakeActive = function(){
  161.     var tab = this.GetActiveTab();
  162.     if(tab) tab.MakeInActive();
  163.  
  164.     oMTitle.innerText = this.GetCaption();
  165.     this.GetTab().className = "oMTabOn";
  166.     oMTData.appendChild(this.GetContent());
  167.     this.GetContent().style.display = "block";
  168.     this.SetScrollPosition(0);        // reset the scroll bar.
  169.     oMTData.scrollTop = this.GetScrollPosition();
  170.     
  171.     // save the state to a userData store.
  172.     goPersist.SetAttribute("selectedTab", this.GetCaption());
  173. }
  174.  
  175. CTabber.prototype.GetActiveTab  = function(){
  176.     for(var i=0; i<gaTabs.length; i++){
  177.         var tab = gaTabs[i];
  178.         if(tab.IsActive()) return tab;
  179.     }
  180. }
  181.  
  182. //
  183. // Forces an active tab to become inactive.  Changes the state of the tab
  184. // and removes the <div> from the screen.
  185. //
  186. CTabber.prototype.MakeInActive = function(){
  187.     this.GetContent().style.display = "none";
  188.     this.GetTab().className = "oMTab";
  189.     oMTitle.innerText = "";
  190. }
  191.  
  192. //
  193. // Event for when the mouse moves over the tab button.
  194. //
  195. CTabber.prototype.OnMouseHover = function(){
  196.     if(!this.IsActive())        // should only run event if not already active.
  197.         this.GetTab().className = "oMTabHover";
  198. }
  199.  
  200. //
  201. // Event for when the user clicks the tab button.
  202. //
  203. CTabber.prototype.OnMouseClick = function(){
  204.     if(!this.IsActive()){        // should only run event if not already active.
  205.         this.MakeActive();
  206.     }
  207. }
  208.  
  209. //
  210. // Event for when the user moves the mouse from within the tab button area.
  211. //
  212. CTabber.prototype.OnMouseFlee = function(){
  213.     if(!this.IsActive())        // should only run event if not alreay active.
  214.         this.GetTab().className = "oMTab";
  215. }
  216.  
  217. // 
  218. // Returns the scroll position for the <div> associated with this tab object.
  219. //
  220. CTabber.prototype.GetScrollPosition = function(){
  221.     this._scroll;
  222. }
  223.  
  224. //
  225. // Sets the scroll position for the <div> associated with this tab object.
  226. //
  227. CTabber.prototype.SetScrollPosition = function(newValue){
  228.     this._scroll = newValue;
  229.     
  230.     if(this.IsActive()) oMTData.scrollTop = newValue;
  231.     
  232.     goPersist.SetAttribute("scroll", newValue);
  233.     goPersist.Save();
  234. }
  235.  
  236. //
  237. // Initializes the state of the tab.  This includes creating the physical tab
  238. // as well as associated a <div> with it.
  239. //
  240. CTabber.prototype._initializeComponent = function(newTab){
  241.     this._caption = newTab.tabName;            // the name used for the tab.
  242.     this._content = newTab;                    // the <div> that contains the tabbed data.
  243.     this._scroll = 0;                        // position of the scroll bar.
  244.  
  245.     // prepare the tab for use.  Create the necessary structure.
  246.     this._tab = document.createElement("TD");
  247.     this._tab.onmouseover = onMouseOverRedirect;
  248.     this._tab.onmouseout = onMouseOutRedirect;
  249.     this._tab.onmousedown = onMouseClickRedirect;
  250.     this._tab.onkeypress = onMouseClickRedirect;
  251.     this._tab.onclick = onMouseClickRedirect;
  252.     this._tab.title = this.GetCaption();
  253.     this._tab.className = "oMTab";
  254.     this._tab.tabIndex = "0";
  255.     this._tab.innerText = this.GetCaption();
  256.     this._tab.tab = this;                    // simply attachs a reference to this tab object onto the <TD>.
  257.     this.GetContent().tab = this;
  258. }
  259.  
  260. //
  261. // functions that dispatch the event to the correct handler.  This is done because
  262. // when an event fires, there is no way for the system to know which user-defined
  263. // object (CTabber) is being invoked.  The <TD> has a reference to the owning tab object
  264. // so that the event can be invoked on the correct object.
  265. //
  266. function onMouseOverRedirect(){
  267.     this.tab.OnMouseHover();
  268. }
  269.  
  270. function onMouseOutRedirect(){
  271.     this.tab.OnMouseFlee();
  272. }
  273.  
  274. function onMouseClickRedirect(){
  275.     this.tab.OnMouseClick();
  276. }
  277. //---------------------------------------------------------------------------------------
  278.  
  279.  
  280. function expand_onclick_handler(){
  281.     toggleExpandDataView();
  282. }
  283.  
  284. function scroll_onscroll_handler(){
  285.     gaTabs[0].GetActiveTab().SetScrollPosition(oMTData.scrollTop);
  286. }
  287.  
  288. //
  289. // Expands or collapses the list based on the interaction with the expand/collapse glyph.
  290. //
  291. function toggleExpandDataView(){
  292.     if(oCollapso.state == "collapsed"){
  293.         // the state is collapase so force environment to be expanded.
  294.         oCollapso.title = "Collapse";
  295.         oMTData.style.overflow = "visible";
  296.         oCollapso.src = gsGraphicsPath + "UI_OM_collapse.gif";
  297.         oCollapso.state = "expanded";
  298.         
  299.         // now that the view is being expanded, must save this state.
  300.         goPersist.SetAttribute("expanded", "true");
  301.     } else {
  302.         // the state is expanded so force environment to be expanded.
  303.         oCollapso.title = "Expand";
  304.         oMTData.style.overflow = "auto";
  305.         oCollapso.src = gsGraphicsPath + "UI_OM_expand.gif";
  306.         oCollapso.state = "collapsed";
  307.  
  308.         // now that the view is being collapsed, must remove expanded state.
  309.         goPersist.SetAttribute("expanded", "false");
  310.     }
  311. }
  312.  
  313. function initTabbedMembers()
  314. {
  315.     if(document.getElementById("oMT")){
  316.         var mshaid = document.all("MS-HAID");        // need to get the topic id for this page.
  317.         if(mshaid) gsPageId = mshaid.getAttribute("content");
  318.  
  319.         locateAvailableTabs();                // assembly an array of all the divs that are tabs.
  320.  
  321.         divscol=document.all.tags("div");
  322.         divsize=divscol.length;
  323.         if (divsize>0)
  324.         {
  325.             oMTExplanation.style.display = "block";
  326.             gsTabControl=''
  327.             // this defines the tabbed title bar.
  328.             gsTabControl=gsTabControl+'<TABLE class="oMembersTable" border="0" cellpadding="0" cellspacing="0" style="border-colapse:collapse" bordercolor="#111111" width="90%">';
  329.             gsTabControl=gsTabControl+'    <STYLE>';
  330.             gsTabControl=gsTabControl+'        .oMembersTable    {fount-family:verdana; font-size:70%}';
  331.             gsTabControl=gsTabControl+'        TD                {font-family:verdana; font-size:70%}';
  332.             gsTabControl=gsTabControl+'        .oMTab            {background:#eeeeee; width:100%; height:20px; border-top=1px solid #6699cc; padding:7px; padding-left:7px; cursor:hand;}';
  333.             gsTabControl=gsTabControl+'        .oMTabOn        {background:#999999; width:100%; height:20px; color:#ffffff; border-top:1px groove white; padding:7px; padding-left:7px; cursor:hand;}';
  334.             gsTabControl=gsTabControl+'        .oMTabHover        {background:#dddddd; width:100%; height:20px; border-top=1px solid #6699cc; padding:7px; padding-left:7px; cursor:hand;}';
  335.             gsTabControl=gsTabControl+'    </STYLE>';
  336.             gsTabControl=gsTabControl+'    <TR>';
  337.             gsTabControl=gsTabControl+'        <TD width="100%" bgcolor="#6699cc">';
  338.             gsTabControl=gsTabControl+'            <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#111111" width="100%" id="AutoNumber4">';
  339.             gsTabControl=gsTabControl+'                <TR>';
  340.             gsTabControl=gsTabControl+'                    <TD width="4" height="25px" style="background-image:url(\'' + gsGraphicsPath + 'UI_OM_top_left_corner.gif\'); background-repeat:no-repeat"> </TD>';
  341.             gsTabControl=gsTabControl+'                    <TD width="*" height="25px">';
  342.             gsTabControl=gsTabControl+'                        <DIV id="oMTitle" style="color:white; font-weight:bold; font-size:11pt; font-family:arial"> </DIV>';
  343.             gsTabControl=gsTabControl+'                    </TD>';
  344.             gsTabControl=gsTabControl+'                    <TD width="25" height="25px" style="padding-top:2px">';
  345.             gsTabControl=gsTabControl+'                        <IMG id="oCollapso" src="' + gsGraphicsPath + 'UI_OM_expand.gif" onclick="expand_onclick_handler();" title="Expand" state="collapsed" style="cursor:hand" width="21 height="18">';
  346.             gsTabControl=gsTabControl+'                    </TD>';
  347.             gsTabControl=gsTabControl+'                    <TD width="4" height="25px" style="background-image:url(\'' + gsGraphicsPath + 'UI_OM_top_right_corner.gif\'); background-repeat:no-repeat; background-position:top right;"> </TD>';
  348.             gsTabControl=gsTabControl+'                </TR>';
  349.             gsTabControl=gsTabControl+'            </TABLE>';
  350.             gsTabControl=gsTabControl+'        </TD>';
  351.             gsTabControl=gsTabControl+'    </TR>';
  352.             
  353.             gsTabControl=gsTabControl+'    <TR>';
  354.             gsTabControl=gsTabControl+'        <TD width="100%">';
  355.             gsTabControl=gsTabControl+'            <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#111111" width="100%">';
  356.             gsTabControl=gsTabControl+'                <TR>';
  357.             gsTabControl=gsTabControl+'                    <TD width="95px" style="padding:5px; padding-top:0px; background:#eeeeee; border-top:1px solid white; border-left:1px solid #6699cc; border-bottom:1px solid #6699cc; border-right:4px solid #6699cc" valign="top">';
  358.             gsTabControl=gsTabControl+'                        <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#111111" width="100%">';
  359.             gsTabControl=gsTabControl+'                            <TBODY id="oMTabberList">';
  360.             gsTabControl=gsTabControl+'                                <TR>';
  361.             gsTabControl=gsTabControl+'                                    <TD width="100%"  height="20px" bgcolor="#eeeeee" style="padding-left:2px;"><B>Show:</B></TD>';
  362.             gsTabControl=gsTabControl+'                                </TR>';
  363.             //
  364.             // the tabs will be dynamically built later based on the <div> content.
  365.             //
  366.             gsTabControl=gsTabControl+'                            </TBODY>';
  367.             gsTabControl=gsTabControl+'                        </TABLE>';
  368.             gsTabControl=gsTabControl+'                    </TD>';
  369.             gsTabControl=gsTabControl+'                    <TD width="*" valign="top" style="border-right:1px solid #6699cc; border-bottom:1px solid #6699cc" id="oMTabberContent">';
  370.             gsTabControl=gsTabControl+'                        <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" height="100%" width="100%>';
  371.             gsTabControl=gsTabControl+'                            <TR>';
  372.             gsTabControl=gsTabControl+'                                <TD height="20" width="100%" bgcolor="#dddddd" style="border-collapse:collapse" bordercolor="#111111" height="100%">';
  373.             gsTabControl=gsTabControl+'                                    <TABLE border="0" cellpadding="0" cellspaceing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">';
  374.             gsTabControl=gsTabControl+'                                        <TR>';
  375.             gsTabControl=gsTabControl+'                                            <TD width="100%" height="*">';
  376.             gsTabControl=gsTabControl+'                                                <DIV id="oMTData" onscroll="scroll_onscroll_handler();" style="height:255px; overflow:auto; overflow-x:hidden;"></DIV>';
  377.             gsTabControl=gsTabControl+'                                            </TD>';
  378.             gsTabControl=gsTabControl+'                                        </TR>';
  379.             gsTabControl=gsTabControl+'                                    </TABLE>';
  380.             gsTabControl=gsTabControl+'                                </TD>';
  381.             gsTabControl=gsTabControl+'                            </TR>';
  382.             gsTabControl=gsTabControl+'                        </TABLE>';
  383.             //
  384.             // the actual member links appear here based on the selected tabs.
  385.             //
  386.             gsTabControl=gsTabControl+'                    </TD>';
  387.             gsTabControl=gsTabControl+'                </TR>';
  388.             gsTabControl=gsTabControl+'            </TABLE>';
  389.             gsTabControl=gsTabControl+'        </TD>';
  390.             gsTabControl=gsTabControl+'    </TR>';
  391.             gsTabControl=gsTabControl+'</TABLE>';
  392.  
  393.             oMT.insertAdjacentHTML("beforeBegin", gsTabControl);    // renders the initial, constant, content.
  394.             goPersist = new CPersist(oMTData, gsStoreName);        // now I create the instance.
  395.             
  396.             // cycles through all the tabs and renders the tab buttons.
  397.             for(var i=0; i<gaTabs.length; i++){
  398.                 var tab = gaTabs[i];
  399.                 var tr = document.createElement("TR");
  400.                     tr.appendChild(tab.GetTab());
  401.                     
  402.                 oMTabberList.appendChild(tr);
  403.             }
  404.             
  405.             // determine the initial tab to display.  If there is persistent
  406.             // information, they use that, otherwise, just use the first
  407.             // tab in the list.
  408.             restoreInitState()
  409.         }
  410.     }
  411. }
  412.  
  413. //
  414. // cyncles through all the <div> tags and locate any that might be tabs.
  415. //
  416. function locateAvailableTabs(){
  417.     var divs = document.all.tags("div");
  418.     var key;
  419.     for(key in divs){
  420.         var div = divs[key];
  421.         if(div.tabName){    // this is a tag.  Try to add it to the tab collection for later use.
  422.             gaTabs[div.tabName] = gaTabs[gaTabs.length] = new CTabber(div);
  423.             div.style.display = "none";
  424.         }
  425.     }
  426. }
  427.  
  428. function restoreInitState(){
  429.     persistTab = goPersist.GetAttribute("selectedTab");
  430.     persistExpand = goPersist.GetAttribute("expanded");
  431.     persistScroll = goPersist.GetAttribute("scroll");
  432.     
  433.     if(gaTabs[persistTab]) gaTabs[persistTab].MakeActive(); else gaTabs[0].MakeActive();
  434.     if(persistExpand) toggleExpandDataView();
  435.     if(persistScroll) gaTabs[0].GetActiveTab().SetScrollPosition(persistScroll);
  436. }
  437.